<template>
  <div>
    <div id="paper">
      <div id="title">
        <span v-if="billList.length > 0
">{{billList[0].type === 3 ? '退货单' : '出售单'}}</span>
      </div>
      <div style="width: 96%;margin-left: 2%">
        <el-row>
          <el-col :span="12">
            <span class="content-title">客<span style="display: inline-block;width: 36px"></span>户:</span>
            <span class="content-data" style="width: 70%" v-if="billList.length > 0">{{billList[0].buyers}}</span>
          </el-col>
          <el-col :span="12">
            <span class="content-title">业<span style="display: inline-block;width: 9px"></span>务<span style="display: inline-block;width: 9px"></span>员:</span>
            <span class="content-data" style="width: 70%" v-if="billList.length > 0">{{billList[0].sellBy}}</span>
          </el-col>
        </el-row>
        <div style="height: 10px"></div>
      </div>

      <div id="table">
        <div id="table-title">
          <div class="table-col" style="width: 8%;text-align: center">编号</div>
          <div class="table-col" style="width: 17%;text-align: center">商品</div>
          <div class="table-col" style="width: 9%;text-align: center">规格</div>
          <div class="table-col" style="width: 8%;text-align: center">金额</div>
          <div class="table-col" style="width: 18%;text-align: center">串号</div>
          <div class="table-col" style="width: 10%;text-align: center">仓库</div>
          <div class="table-col" style="width: 10%;text-align: center">方式</div>
          <div class="table-col" style="width: 20%;border-right: 0;text-align: center">备注</div>
        </div>
        <div class="table-row" v-for="item in billList">
          <div class="table-col" style="width: 8%;text-align: center">{{item.billId}}</div>
          <div class="table-col" style="width: 17%">{{item.billName}}</div>
          <div class="table-col" style="width: 9%">{{ item.printing}}</div>
          <div class="table-col" style="width: 8%;text-align: center">{{item.sellPrice}}</div>
          <div class="table-col" style="width: 18%">{{item.goodsSn}}</div>
          <div class="table-col" style="width: 10%;text-align: center">{{stockFormat(item.stockId)}}</div>
          <div class="table-col" style="width: 10%;text-align: center">{{ paymentFormat(item.paymentType)}}</div>
          <div class="table-col" style="width: 20%;border-right: 0px"><textarea style="width: 130px;height: 20px;margin-top: 5px;border: 0px;font-size: 12px"></textarea></div>
        </div>

        <div class="table-row">
          <div class="table-col" style="width: 34%;text-align: center">总计</div>
          <div class="table-col" style="width: 8%;text-align: center">{{totalPrice()}}</div>
          <div class="table-col" style="width: 58%;border-right: 0px;text-align: right;padding-right: 10px"> 大写: {{numberFormat(totalPrice())}}</div>
        </div>

        <div class="table-row" style="font-size: 14px;border: 0px">
          <div class="table-col" style="width: 30%; border: 0px">制单人：{{userInfo.nickName}}</div>
          <div class="table-col" style="width: 30%; border: 0px">制单日期：{{parseTime(new Date(), '{y}-{m}-{d}')}}</div>
          <div class="table-col" style="width: 40%; border: 0px;display: flex;flex-direction: row">电话：<input style="border: 0px;height: 14px;margin-top: 4px" /></div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getUserProfile} from "@/api/system/user";
import {getBill} from "@/api/recovery/bill"
import {getGoods} from "@/api/recovery/goods"
import $const from "@/utils/websocket/ServerPath";
import {listStock} from "@/api/recovery/stock"
export default {
  name: "bill_printing",
  data() {
    return {
      billIds: [],
      userInfo: {},
      pageInfo: [],
      /*支付方式列表*/
      paymentTypeOptions: $const.PAYMENT_OPTIONS,
      stockList: [],
      billList: [],
    }
  },
  created() {
    const query = this.$route.query;
    if(query.ids != null) {
      console.log(typeof query.ids);
      if(typeof query.ids === 'string') {
        let arr = [Number(query.ids)]
        this.billIds = arr;
      }else {
        this.billIds = query.ids;
      }

    }
    getUserProfile().then(resp => {
      this.userInfo = resp.data
    })
    this.initBillList();
    listStock({}).then(resp => {
      this.stockList = resp.rows;
    })

    setTimeout(function (){
      window.print();
    },1000)

    document.onkeydown = function (e) {
      if(e.key === "Enter") {
        window.opener = null;
        window.close();
      }
    }
  },
  methods: {
    totalPrice() {
      let price = 0;
      for (let i = 0; i < this.billList.length; i++) {
        price += Number(this.billList[i].sellPrice);
      }
      return price;
    },
    numberFormat(num) {
      let resp = "";
      let a = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      let b = ['分', '角', '拾','佰', '仟', '万', '拾', '佰', '仟'];
      let str = String(num);
      let strArr = str.split(".");
      for(let i = strArr[0].length - 1; i >= 0; i--) {
        let m = strArr[0].charAt(i);
        let n = a[Number(m)];
        if((strArr[0].length - i) >= 2 && Number(m) > 0) {
          resp =  b[(strArr[0].length - i)] + resp;
        }
        if(!(resp === "" && Number(m) === 0 || resp.charAt(0) === a[0])) {
          resp = n + resp;
        }
      }

      if(strArr.length === 1) {
        resp += "元整";
      }else {
        resp += "元";
        resp += a[Number(strArr[1].charAt(0))] + b[1];
        if(strArr[1].length === 2) {
          resp += a[Number(strArr[1].charAt(1))] + b[0];
        }
      }
      return resp;
    },
    /* 仓库名称转换*/
    stockFormat(stockId) {
      for(let i = 0; i < this.stockList.length; i++) {
        if(Number(stockId) === Number(this.stockList[i].stockId)){
          return this.stockList[i].stockName;
        }
      }
    },
    /* 支付方式 转换*/
    paymentFormat(type) {
      for(let i = 0; i < this.paymentTypeOptions.length; i++) {
        if(Number(type) === Number(this.paymentTypeOptions[i].value)) {
          return this.paymentTypeOptions[i].label;
        }
      }
    },
    /* 数据初始化*/
    async initBillList() {
      for(let i = 0; i < this.billIds.length; i++) {
        let billInfo = null;
        await getBill(Number(this.billIds[i])).then(resp => {
          billInfo = resp.data;
        })
        await getGoods(billInfo.goodsId).then(resp => {
          if(resp.data != null) {
            billInfo["goodsSn"] = resp.data.goodsSn;
            billInfo["printing"] = resp.data.printing;
            billInfo["stockId"] = resp.data.stockId;
          }
        })
        this.billList.push(billInfo);
      }
      console.log(this.billList);
    }
  }
}
</script>

<style scoped>
 #paper {
   margin-top: 30px;
   width: 750px;
   margin-left: 100px;
   height: auto;
 }
 #title{
   width: 100%;
   font-weight: 600;
   font-size: 24px;
   text-align: center;
   padding: 20px;
 }
 .content-data {
   border-bottom: solid #000000 1px;
   display: inline-block;
   width: 50%;
   margin-left: 10px;
 }
 .content-title {
   font-size: 18px;
 }
 #table {
   width: 96%;
   margin-left: 2%;
 }
 #table-title {
   border: solid #000000 1px;
   margin-top: 10px;
   display: flex;
   flex-direction: row;
   font-size: 16px;
   line-height: 36px;
 }
 .table-col {
   border-right: solid #000000 1px;
   padding: 5px;
 }
 .table-row {
   border: solid #000000 1px;
   border-top: 0px;
   display: flex;
   flex-direction: row;
   font-size: 14px;
 }
</style>
